<template>
  <ContainerContent :loading="loading" :pagination="pagination" @run="run">
    <template #header>
      <a-button type="primary" @click="open">
        <i-icons-btn-add />
        添加区域
      </a-button>
      <CloudFilterBar
        v-model="queryParams"
        :run="run"
        :schemes="filterSchemes"></CloudFilterBar>
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      @sorter-change="onSorterChange">
      <template #node_count="{ record }">
        <div class="flex items-center gap-x-1 leading-5">
          {{ record.node_count }}
          <a-tooltip position="bottom" content="节点详情">
            <i-icons-base-info
              class="text-7 hover:text-2 cursor-pointer"
              @click="openNode(record)" />
          </a-tooltip>
        </div>
      </template>
      <template #site_count="{ record }">
        <div class="flex items-center gap-x-1 leading-5">
          {{ record.site_count }}
          <a-tooltip content="站点详情">
            <i-icons-base-info
              class="text-7 hover:text-2 cursor-pointer"
              @click="openSite(record)" />
          </a-tooltip>
        </div>
      </template>
      <template #action="{ record }">
        <a-link :hoverable="false" @click="open(record)"> 编辑 </a-link>
        <a-link
          status="danger"
          :hoverable="false"
          @click="handDelete(record.id)">
          删除
        </a-link>
      </template>
    </a-table>
    <AddArea
      v-model:visible="visible"
      :record="editAreaData"
      @reload="run"></AddArea>
    <NodeDetails v-model:visible="nodeVisible" :record="nodeData"></NodeDetails>
    <SiteDetails
      v-model:visible="siteVisible"
      :area-data="siteData"></SiteDetails>
  </ContainerContent>
</template>
<script lang="ts" setup>
import {
  deleteApiResolveRegionApi,
  getApiResolveRegionsListApi
} from '@/apis/modules/resolve/area'
import ContainerContent from '@/components/ContentContainer.vue'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { useListRequest } from '@/hooks/useListRequest'
import { commonTableProps } from '@/utils/table'
import useTableColumn from './column'
import AddArea from './components/AddArea.vue'
import NodeDetails from './components/NodeDetails.vue'
import SiteDetails from './components/SiteDetails.vue'

const queryParams = ref<CloudFilterBarState>({})
const { visible, open, data: editAreaData } = usePopup()
const { visible: nodeVisible, open: openNode, data: nodeData } = usePopup()
const { visible: siteVisible, open: openSite, data: siteData } = usePopup()

const { columns, filterSchemes } = useTableColumn()
const { data, loading, run, pagination } = useListRequest(
  getApiResolveRegionsListApi,
  {
    params: queryParams,
    immediate: true
  }
)
const { createSortChange } = useTable(run, data)

const onSorterChange = createSortChange(queryParams)

const handDelete = (id: string) => {
  CloudModal.error(
    {
      content: '该操作会删除此区域，确认删除？',
      okText: '删除'
    },
    () =>
      deleteApiResolveRegionApi({ id }).then(() => {
        run()
        ToastUtils.success('删除成功')
      })
  )
}
</script>
